SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chrome problem about media query states caused by the scrollbar

    If the browser window width is very close but less than the width defined in a media query, and the page content is long enough to display the vertical scrollbar, Chrome initially renders the page without considering the scrollbar width, then applies the media query when anything on the page causes a redraw.


    Resize your window to very close but less than 800px and test these pages in Chrome:

    http://mousewave.com/test2.html (redraw triggered with a css hover)
    http://mousewave.com/test.html (redraw triggered with moving an element with javascript)


    Check this also on Paul O'B's responsive design example (resize your window to very close but less than 480px and hover something):

    http://www.pmob.co.uk/tweetie/index.htm


    (Close developer console while testing.)


    Code of test2.html
    Code HTML4Strict:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Test</title>
     
    		<style>
    			body {margin:0; padding:0; font-size:24px;}
    			#wrapper {background:red; width:200px; height:4000px; margin:0 auto;}
     
    			#myDiv {padding:0 0 0 0;}
    			#myDiv:hover {padding:10px 0 0 0;}
     
    			@media screen
    			and (min-width:800px) {
     
    				#wrapper {background:#eee;}
     
    			}
    		</style>
    	</head>
     
    	<body>
     
    		<div id="wrapper">
    			<div id="myDiv">
    				<div id="myText">Background color changes to red on hover.</div>
    			</div>
    		</div>
     
    	</body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I couldn't get it to go wrong on Chrome PC but it does sound feasible that you have found a bug there. What system and Chrome version are you using? If you can reproduce the bug consistently then it might be worth filing a bug report for it.

  3. #3
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm testing on Windows 7 with an up to date Chrome 17.0.963.56.

    I checked with few more responsive sites at http://mediaqueri.es/ and I could reproduce it in all of them all the time.

    (Make sure you turn off JavaScript and the Chrome developer panel, for some scripts trigger a redraw on page load instantly which masks the problem I'm describing.)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I still couldn't reproduce it but it's probably just me being thick.

    It does sound feasible though and most likely a bug that should be reported.

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Indianapolis, Indiana, United States
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Having this same problem with a site I'm working on. You explained it well, and yes it does appear to only happen in chrome.

  6. #6
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Indianapolis, Indiana, United States
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Before media query takes effect


    Nether Zone


    Post media query

  7. #7
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Indianapolis, Indiana, United States
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I reported a bug using the in browser tool, Wrench > Tools > Report an issue

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Still looks like the chrome bug but do you have a link to the problem so we can see it in action?

  9. #9
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Indianapolis, Indiana, United States
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Still looks like the chrome bug but do you have a link to the problem so we can see it in action?
    Sure: staging-silversquareinc.com.sitepotion.com

    Note, I am unable to recreate this bug on my mac. Possibly because of the lowered resolution.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •