We Keep Coding

CSS3 Fixed Background not working on mobile devices - video background possible?

Using a fixed css3 background images works fine for the desktop (Chrome, Firefox, IE/Edge no issues), it stays always at the screen with full-height and width bg.
Unfortunately it does not work on mobile devices. Tablets and phones with Android are unable to fix the image in the background.
Is there a way to check the device height/width to load different media or is it possible to simply zoom or scale the image automatically? Are there maybe any JS kits to accomplish this.
Moreover I plan to embed a background video (webm), does this work on mobile devices? May I ask to check if there is way, the video background loads only with WiFi connection. Otherwise it shall be a static image.

Revolution Sliders fonts are pixelated and don't look good in iPhone6 in responsive website

We are developing a responsive website with WordPress and introduced sliders with Revslider. But, as we have tested it with iPhone6+ using safari after loading in 2-3 slides font get pixelated and shows blur text title and description.
Can anyone suggest Slider setting / CSS patch to make font consistent in all the medium? Surprisingly, iPad and iPhone5 shows appropriate fonts in slider only iPhone6 has font pixelation issue.

Here I have got a resolution of my question. Use this if anyone have a similar problem.
.rev_slider_wrapper .tp-caption {
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;
-webkit-transform: none !important; }
By Applying above three lines of code in CSS, you will be able to resolve Font Pixelated which happened in my case.

Bootstrap image responsive not working in IE and Firefox but works fine in Google Chrome

I am facing a weird behavior from bootstrap. I am using img-responsive class for a image in my page using bootstrap.
my image is fine in Google Chrome it re sizes properly but in FF and IE it is re sizing properly in desktop and I PAD view but when i go lower screen size like phones and i phones it doesn't re-sizes it stays the original size.
It works fine for Google chrome for every screen resolutions but in IE and FF it doesn't shrink in any single columns sizes. it retains the original size of the image which is very big.
Attached are the images from the web inspector for each browser.
Firefox
IE
GoogleChrome
Any help

Try updating to the latest version of bootstrap. This has been resolved since version 3.2.1
Related issue : IE backslash hack on .img-responsive stretches images in IE<11

Added col-xs-12 to all the divs being used, then it fixed the issue..

Issue with retinajs plugin

I'm trying to implement retina.js plugin but experiencing a weird issue.
When checking my website with my ipad it seems that the scripts detects that this is a retina screen as it display the #2x logo picture, but instead of displaying the logo with the same size as on a regular screen but with more pixel density, it displays the logo with 2x size. Any idea what the issue is? Many thanks

I think the issue is your image. The normal image has more padding than retina image. If you can equalize the padding of retina and normal image I think It will be ok.

IE GIF/PNG Transparency issue with jQuery

Ok, this is pretty weird...
Here's the page in question: http://s289116086.onlinehome.us/lawjournaltv/index.php
The main blue callout background was originally a PNG, but when I applied some jQuery trickery to it (click the numbers in the top right to see what I mean), an ugly white border appeared where the transparency should be. See this screenshot from IE8: http://skitch.com/darkdriving/n62bu/windows-xp-professional
I figured I could sacrifice the quality/flexibility of a PNG and just resaved each of the backgrounds as GIFs and set the matte color to white (for now). Well, I was proven wrong because IE is treating the GIF transparency the same as the original PNGs.
I've read here that the issue with PNGs, Javascript, and IE has something to do with multiple filters can't be applied to one image, but shouldn't GIFs be exempt from this because they lack the Alpha Channel? Is there any way to make this page look similar in IE to Firefox or Webkit browsers?
Thanks in advance!

This is a bug in IE.
No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.
To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:
if ($.browser.msie)
$(something).css({
background: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
});
(This code works; I'm using it right now)

I basically solved this by loading a different set of images (using PHP) on each page refresh. It's not as dynamic, but my attempts at using the ugly, proprietary CSS filters or other javascript-based plugins were all fruitless. In my eyes, this is clearly one of the biggest bugs I've come across in my time spent hacking away at IE. In fact, I'm suprised it took this long for me to encounter it.
Word to the wise in this case: try to back transparent imagery on a solid color or suffer the consequences in IE.