I am experiencing some weird floating-behavior in Google Chrome within the first responsive project I am working on.
I've uploaded an anonymized version of my responsive header here: http://files.uiux.de/140618_header/
Whenever I visit this page on a desktop with Google Chrome, having no cache of the page, the contact-information in the right-hand corner seem to have a margin-top and 'broken' floating of the icons. As soon as I reload the Page, the position is automatically fixed.
I can reproduce this behavior by resizing the Chrome window to it's narrowest setting, refreshing the page and then resize Chrome until the contact-information shows up again.
I am baffled by this behavior. Firefox and Safari work just fine. Can someone explain to me what is happening there and maybe offer a possible solution?
Here's a screenshot of both the initial rendering and the one after refreshing.
Related
I am encountering a weird issue once again, and it again happens to be in Safari on iPhone. Safari on macOS works fine, and so do all other major browsers.
Here's the issue: Embedding a YouTube video in an iframe transforms the iframe to the left, out of the viewport. There is no transform applied to the iframe, or any parent elements. I double checked, but I am out of luck. Funnily enough, there's two quirks:
The clickable area stays non-transformed. I can interact with the content as if it was in its correct position.
Switching to the tab overview renders the video correctly.
Here's a few screenshots to demonstrate the issue:
I have also created a JSFiddle that reproduces the issue, with markup directly out of the project. Visit it on mobile Safari on iPhone or with a simulator on macOS to see the problem in action. (Use this link for fullscreen access)
Any help would be greatly appreciated.
Hi i really need help on this one, I still can't figure out whats wrong with the scroll down in my website.
The problem:
-As soon as I resize my browser window to a smaller screen, the scroll down stops working
-The problem is happening only in Chrome
this is my website [www.outrippers.cl][1]
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 have a web site page that doesn't seem to be rendering properly for chrome in safari.
It appears it is rendering the width of the screen with twice as many pixels as other browsers. I suspect it may be the initial viewport settings, which work in all other browsers for windows and apple, except for the version of chrome on mac.
I tried removing the viewport setting but that doesn't seem to work. I am using the latest version of Chrome, and if I have a window open in safari beside chrome you can see that chrome is rendering the screen as twice as wide, even though it takes up the same width.
Oops. I can't post an image, but you can see it here: http://straathof.acadnet.ca/test_chrome.jpg
If you would like to test it, you can visit the page here: http://straathof.acadnet.ca/reblend55
Any help for tracking down this problem would be appreciated. I have no idea where to look.
control-0 removed any zooms that had been added to the web page, which allowed it to render properly at the correct width. Apparently some months ago I zoomed in on something and, even though Chrome was removed reinstalled and reset, not to mention quit and restarted a whole lot of times, it still remembered that errant zoom value.
annoying, but answered with someone elses suggestion.
On my website at http://JonathansCorner.com/, the site as a whole displays well in mobile Safari, and the homepage displays well on (desktop) Firefox, Opera, Safari, and IE, but the homepage specifically does not look at all good on mobile Safari:itdisplaysonewordperline,stretchingoutthetextvertically.
I've tried several things to see if I can alter the behavior, and nothing I've tried seems to budge it. Moving the slideshow to an iframe, commenting it out, correcting HTML errors, commenting out the mobile stylesheet, nada. Every other page I've tried within the site looks as intended in mobile Safari, and I have not been able to duplicate the issue in any desktop browser.
Comments on how I can get the homepage to look reasonable in mobile Safari?
If you look at the site using regular Safari, and then attempt to minimize the window, you'll see that the same thing happens.
Setting the minimum width property may help.