The problem is that I have a responsive site, based on joomla framework. It works fine on all browser and all the custom components load easily but I have noticed that it has a problem on some mobile browsers (as: ASUS device, browser integrated on Facebook APP and more) to load a CSS of page, linked to mijoshop component. In fact this component work fine and loads CSS in some mobile browser but other show text and blank page.
For help and better understanding I have attached a video demo:
Video Link1
Video Link2
How can I fix? Thanks!!!
And for first thanks for support :)
The first idea came to my mind is that viewport in browser that doesn't load(or load but doesn't show, check in devtools responsive mode) css file differs from bottom value of pixels in media query. I mean than your design could be without base.css file, css rules work for example from 320px and some browsers have viewport value less than 320 px, so nothing is displayed.
Related
So I made a website which has two CSS files; one is for regular desktop computers, and one is for mobile devices with a max width of 480px. Something happened while I was editing my website, and now the mobile version is the only CSS that shows.
I have two CSS' linked in my header, both the mobile CSS and regular (desktop) CSS. When I remove the mobile css link, the desktop version of the website shows like it should. However, when the mobile css stylesheet link is in place, only the mobile website is what shows on both desktop and mobile devices.
When you go onto my website on a laptop, the whole page is shoved to the left, and it is only 480px wide. Any idea what is up?
I figured it out. There was a wordpress plugin called "Above the Fold" which was the problem. I had to link the CSS in the footer.
Quick question on progressive JPG backgrounds, if anyone knows.
It appears that Firefox ignores the "progressiveness" of JPEGs if they are set as CSS backgrounds and waits until the image is fully loaded until displaying. I have Chrome and IE loading the background images progressively but Firefox just pops them in at full quality.
I'm seeing the proof in front of me , but finding little to no info on it online. Just unanswered forum questions here and there.
Anyone know anything about this? Is it a bug Mozilla know about or what is going on?
Edit: Test case provided by easwee http://sample.easwee.net/jpgProgressive/index.html
I went digging in since I am working on a similar problem at the moment.
Results from personal tests on this test case + Fiddler 2 to simulate slow modem speed:
as HTML <img> as CSS background
Firefox (ver 25.0.1) works no support
Chrome (ver 32.0.1700.107 m) works works
Safari (windows 5.1.7) no support no support
Seems to me from the tests (and from an extensive web search) that the only browser that currently supports progressive background images in CSS is Chrome.
Workaround:
A nice workaround I've been using in cases where the image had to be visible before it finished loading the full size, is to load an extremely compressed image under the high resolution image. So you have the compressed graphic under the element until the full resolution graphic loads over it.
<div style="background:url(extremely_compressed.jpg);">
<div style="background:url(high_quality.jpg);">
</div>
</div>
Workaround 2:
Since Firefox does support progressive loading on <img> tag, you could try setting the <img> to position:absolute (or fixed) and have it load behind the content with a lower z-index.
Wordaround 3 - CSS3:
Use multiple background images if you don't need to support old browsers.
background-image: url('extremely_compressed.jpg'),url('high_quality.jpg');
Have you tried using a jquery plugin? Had a similar issue where I wanted the loading delayed to improve load time so used jquery to load image and override the browser.
Found this with after a quick search:
http://yuilibrary.com/yui/docs/imageloader/
I am developing a website with HTML5 Boilerplate and when started checking it on iPhone saw that it doesn't look good at all. It looks like body gets one width (320px) and other elements get another larger than body causing the webpage look like this
screenshot from chrome https://www.dropbox.com/s/hzdd04wufckcewr/Screenshot%202014-01-20%2008.20.51.png
screenshot iOS simulator https://www.dropbox.com/s/llj4w0gp1cxsh86/Screenshot%202014-01-20%2008.21.21.png
I am using normalize.css default styles. The site has some mixed width for example one div's have a 940px width others should have 100% of viewport.
Has anyone seem this problem before? How can it be fixed? Thanks in advance
I have a wordpress ng gallery template: http://bit.ly/LTJ9ee, the lightbox of which behaves oddly in chrome when a video is embedded on the same page. The problems only occur when:
Using chrome (v23). Tested on all other major browsers (windows 7) with no problems.
If the page is too big for the viewport (has scrollbars)
There is an embedded video in the page, and the video has already been started (same problems occur whether html5 or flash)
If you look at the page here: http://bit.ly/123NW1C, what seems to be happening is that under the above conditions only, the lightbox is not moving to fit the viewport as it should. This makes parts of it display twice and parts of it not display at all. Web inspector says the divs are positioned correctly, but 'as seen' they are not.
I'm currently stumped on this. The wmode fix didn't help, nor did anything else I found online. Any ideas on what this is likely to be? A bug in chrome? Or something about the way this lightbox interacts with an embedded video.
I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/