Here is a bit of CSS that has a simple media query.
http://codepen.io/anon/pen/nuxaw
When I shrink the page so that the view port is less than 320, the box turns green. Now if I follow these steps, the browser will be maximized, but the CSS will still be in the state defined by the media query at 320px.
With the page opened in the first tab, and the browser sized so that the < 320px media query is enabled,
Open a new tab, Browse to a website, like facebook.com.
Maximize the browser.
Take an extended browsing session away from the first tab. Do not reactivate the first tab for a few minutes.
Activate the first tab with the window maximized.
At this point, the view port should be full screen, but the element should still be the green block.
This means the <320 media query is still applied. If you open the debugger though, you'll see that the CSS applied though is the normal CSS. Is this a bug with Chrome?
http://imgur.com/a/TIAAi
Here's an album on imgur that shows the sequence.
Opened, maximized.
Reduced viewport, media query enabled.
Maximized, still using media query.
Looking at the CSS, it says that the dimensions are 300x200, but the UI shows 100x100. Something is broken.
The fix for this issue is to convince Chrome to update the render on the page. You can do it by resizing, maximizing, or changing a class on the body tag. I've updated to codepen to use a visibilitychange event that fires during tab switching to toggle a class on the body to force Chrome to update the page render.
http://codepen.io/anon/pen/nuxaw
Related
I use the Stripe checkout plugin on my wordpress site in Woocommerce. Despite some problems with alignment, everything works fine when filling the payment fields when the screen width is greater than a certain amount of pixels (I don't know exactly how much, but above 800px it works - See the first image). The problem happens when I try to complete the purchase on a screen through the browser on a mobile device or even on the desktop simulating a mobile screen in DevTools (Second image).
[Image 1 - Checkout on desktop deviceImage 2 - Checkout on mobile device Chrome Navigator](https://i.stack.imgur.com/wWS3F.png)
At first I suspected that the problem was related to the css style sheet. I managed to change the size of the div using the #stripe-card-element selectors. The result was only that the blank field get bigger. When inspecting the element when everything is correct, the iframe is loaded inside the #stripe-card-element div, but after decreasing the screen, the iframe is no longer loaded, leaving the code snippet like this.
<div id="stripe-card-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
I've tried updating the plugins I use and looking for a conflict with another plugin, but nothing worked
How can I properly do a media query on the Chrome window's width? Is it even possible to properly do media queries in a Chrome extension?
Right now, my media queries act on the width of the extension's viewport, not on the actual browser's viewport (and the extension's viewport can be larger than the browser's). In a normal web app, the viewport width is always equivalent to the browser's viewport, but it doesn't seem to be the same for an extension
There seems to be a way to do this with JavaScript by setting the 'html' tag's width, but if there is a pure CSS way that'd be preferable
(This is for a browser action extension with a popup UI)
At least in a browser action popup, it is impossible to query the parent window's width with pure CSS. As I thought and #Xan confirmed in the comments, JavaScript is necessary to get the width of the parent window.
A way to do this with JavaScript can be found here: How to get notified on window resize in chrome browser. Note that this does require a content script as chrome.window.onResized is still an open issue since 2010
I've got a page on website with a lot of data, svg elements.
When I press Ctrl+P in Chrome and look at it - the page on preview displayed without any layout (portrait or landscape). I even can't choose it, because there is no option for it. In FF it's looks fine.
I know about media queries and know that i can write this:
#page{size: portrait}
ok, now it looks better, but user still can not choose layout.
I have read something about that it can be depends on width and browser can't correctly calculate it, is it true? How can i resolve this issue? On my page i've used bootstrap grid layout.
I can't seem to find an answer to this rather interesting problem. In google chrome, images that have a set width and/or height, either using attributes, inline styling or css styling, refuse to show up on the page on initial load. They only seem to appear after there has been some page activity. Yet, if you let the images load to their natural size they display on page load perfectly fine. The images can be seen as it works in other browsers and when inspecting elements in chrome the image is display in the popup window.
Any know how to fix this?
define what you mean by: 'after some page activity'.
You also mentioned that the it happens when you have set width AND/OR height which leads me to believe in some of your testing your ommiting width OR height so it can be calculated by the browser. if that is the case then yes the image will never look proper and the elements will have no size on initial page load UNTIL the image is downloaded, the browser inspects the image and determines the dimensions missing to create the bounding box.
Edit:
After looking at your online site, my previous comment explains the gist of it but I can see that you're setting a width of 'auto' which requires the browser to load the image first and detect the sizes. Which will cause a delayed 'reflow' in the browser rendering. Set your widths and heights otherwise they will need to calculated by the client browser. And if you have not so good pc it looks sluggish. On my system if i hard refresh with no cache sometimes i get all the thumbs and other times I don't and the delay is very noticeable.
So in short make your images always have a width AND height.
Edit:
You also have some 404 errors that can cause some latency. http://www.webpagetest.org/result/120725_0C_3N6/1/details/
Edit:
I think your only option is to load the bg image first by getting it higher up in the order of resources downloaded so it loads in as fast as possible to be rendered.
One trick might be to load the bg image in a hidden div to preload it right away so the browser downloads it first. And even if you do that you should expect to see some flash of black background while you wait for the high res shot to download and get loaded. Can't set widths and heights on background images anyways. Going further you can speed up the response time maybe by loading all the thumbnails with an AJAX call AFTER page loads so they don't even compete with the big photo shot and start downloading until the dom is fully loaded. You can even put a nice effect in there to maybe fade in the thumbnails loading or something to that effect.
If we have hidden some stuff using display:none; for example: images , will it still be downloaded by rendering engine? If yes, does that mean while opening the same web page in mobile, it's going to be unnecessary extra weight to download?
This can further mean that modifying the same webpage for mobile can be a bad idea. Please advice. Thanks.
Yes, the entire page is downloaded (hidden elements and all). The display:none is meaningless until the page has been processed by the browser's CSS Engine.
There are several ways to stop an image being downloaded, wether the image is inline or is a background image within a CSS style, or wether it is being brought in through a media query. It works for nearly all mobile devices (except 'Fennec 10.0+' being the only device that still downloaded the image.- see Tim Kadle's test results)
Tim Kadlec's 'Media Query & Asset Downloading Test Results' research at:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
It says, for a background image, hide the parent element. If you can’t do that, then use a media query to set the background-image to only download when screen or device size is at certain size. Just define what you want hidden / to not download by putting inside media queries. Isn't it marvellous.
Also another brilliant test to use, so simple, at:
http://timkadlec.com/mq/test4.php
On this test you just resize your browser window to mimic wether 'desktop' or 'mobile' to see wether it is downloading images related to the media queries. You simply click the links for each scenario you want to test.