I'm building a site for a client and i've come across an issue where in a webkit browser the images dont fully load. so chrome and safari, on mac and ipad.
http://coatesconstruction.co.uk
I've done some research previously and i found an article suggesting that webkit browsers open multiple connections up per image to download them and i wondered if this couldnt be the issue.
one of the aims with this site was to make the right column fluid, such that if the user resized the browser the image showing grew, which has meant the backend is saving images at 1600px wide and im using width: 100% to make them autosize to the left column.
This means the images are pretty massive on the server, is it anything to do with the size which is stopping chrome and safari from showing them?
It does load the entire image.
You have messed up somewhere in the CSS code and that's why the entire image doesn't show up on Webkit browsers.
Try setting div#col1's height to 656px (or what ever height you want!) and you will see the entire image.
um, the images are loading fine, the issue is that you're cropping them :)
.col1, .col2, .col3 {
overflow: hidden;
}
Since all your images have position:absolute set, they won't force the parent container to get any larger, so your parent is stuck at 124px high.
.leftmenu .col1 {
height: 765px;
}
Related
I'm currently working on a website and I have one particular issue with responsiveness.
The website looked very good and resized appropriately when I changed the size of the browser window from maximum to minimum. However I did get an issue on mobile devices where the website was cut off at the right and the title text was overflowing. I managed to reproduce the issue in the browser as well by making the window as small as possible and then zooming in until I got a horizontal scroll bar. Scrolling all the way to the right then revealed the issue.
I tried to fix it for mobile devices by including the following code in my CSS:
#media(max-width: 700px) {
html,body {
width: 150%;
height: 200%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
It did solve the overflow issue but now after initial loading the page on mobile is zoomed in and I have to double tap to reset the zoom. I was unable to find a solution for this issue to reset the zoom automatically.
Also shrinking the browser window on PC with this code in place cuts off the website at the right side when the media query is executed.
Here is the code together with a way to look at the issues. If you want to see the original issue you only need to delete the media query from the top of the CSS file.
https://codepen.io/lapierre-bernard-david/pen/NWqZMqd
I'm very new to web development so I'm pretty sure what I came up with is more of a hack than an actual solution. I'd be very happy about any advice.
As I've seen many people with a similar issue, I did include the often suggested viewport header of course, and I have no fixed width anywhere in my code.
I've been developing a large single page application and in the process have run across a series of rendering artifacts, all of which are specific to chrome. My version of chrome is the most up to date as of this post: Version 39.0.2171.95 (64-bit). Both of these only happen on my macbook pro retina monitor, if I move the window either partially or fully to another monitor, the part that is on that monitor no longer shows the artifact (after chrome repaints) Such a first world problem I know...
My gut is telling me that if I tweak a certain CSS property or go about something slightly different, I can avoid these issues, but everything I've tried has failed. So I look to you wise members of the stack community, gather 'round and hearken to my tales:
First Artifact: Simple hide show fails hard in a seemingly random but highly reproducible way.
Check these three images, one is not like the other!
Each little icon at the top hides or shows a different div. They're all equivalent, just show a different number of those traffic related icons. The middle one will not show up only when i first click the left one (one with all the cars). I think it has to do with the fact that the one with all the cars has a scroll bar. If I then go into chrome inspector and like check or uncheck pretty much any property about it, chrome repaints it just fine. Again this all works on a different monitor/literally any other browser (including ie8) so it's not some dumb coding bug.
Second Artifact: When I scroll, a fixed div at the bottom of my page gets cut and moves with the page.
Notice that the blue bar gets cut! The blue bar has CSS as follows:
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
It doesn't even get cut right where there is some sort of divider in the html. There is no element at at the line of the cut, the only nearby element is the white box (and there's no like padding or margin from that white box.. it's literally getting cut randomly in space)
Any help would be appreciated. This is a huge pain when all we have to demo is our retina screens.
Just had someone else on SO with issues getting elements to render correctly on Chrome with a Retina display too: How can I remove the single pixel space between these elements on retina displays?
It looks like Chrome on a Retina display may have some rendering engine issues when it comes to rendering page elements. You can confirm whether its an Engine issue by seeing if the same issue occurs in the latest version of Opera, as it uses the same Blink rendering engine as Chrome (separate fork from Webkit that Safari uses).
If its an engine issue, you may be limited in your options to fix the issue until Google releases a fix. Otherwise there may be a mad genius on here who can work around the problem.
Best of luck :)
As for the position fixed bar try editing the css to this
position: fixed;
bottom: 0px;
width:100%; /* or whatever your width is */
height:50px; /* or whatever your height is */
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;
As for the display problem, if it works fine on other webkit browsers that usually indicate that there is an issue with the browser itself and you can't do anything about it except maybe make a rule for the screen size that is having the display issue, to show the website or app in a different style or maybe zoom in or out?
Anyways best of luck with your problem
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
I've run into a problem at work with Safari 6 on OS X. When viewing an archive of a sent email (by clicking the "click here to see online" link), Safari displays the newsletter at about 50% of its actual size. This is not replicable on any browser in Windows (including Safari), which leads me to believe it's an OS X issue???
LINK: http://uofi.uic.edu/emailer/newsletter/41090.html
It's supposed to be a mobile-friendly page that resizes based on viewing size.
I looked into it and realized that the max-width was not having much of an effect (a table should go 100% unless otherwise specified - max-width allows it to go 100% but limits it from exceeding a specific width) and when max-width was replaced by width, it worked perfectly. However, this prevents it from being viewable on a mobile-device or scalable in a desktop browser.
Anyone have any idea what is causing ONLY Safari 6 on OS X to render this badly?
As a side note, if you refresh the page, randomly it displays properly (at 600px rather than 350px). However, this only works if you reenter the URL by highlighting the address bar and clicking Enter. If I click the refresh button, it doesn't work all that often. Regardless, this is not a solution for our user base.
Would greatly appreciate any input/feedback!
Thanks.
Set display: inline-table; and thats it...
<table.. style="background:#e7e7e7; width:100%; max-width: 600px; display: inline-table;"..>
When testing my site on my local computer, the proportions are correct; the images and widths are as I want them to be.
However, when I upload them to my web host, Dreamhost, it seems like the entire site is bumped up about 10% (the images, the font sizes, the sidebar width, etc). The scaling issue occurs in Firefox, Chrome, IE7-10, Safari, but also shows correctly when viewed locally.
The code is exactly the same. I've tried re-uploading images and testing my code but to no avail. I've never had an issue like this before... kinda stumped.
you might zoomed in your site while on a local computer. when you upload it to a hosting site it displays it's default size view. so when making web pages don't zoom in or zoom out.
Sometimes this thing happens, when the CSS programmer uses em rather than px. In some cases, the problem can be solved, especially in font issue, with a property: 100%. Like:
body{
font-size:100%;
}
p{
font-size:0.5em;
}
It'll set 100% for all the font properties, but will specify the font-size in the specific area, tag. The 100% will then lead the area, tag to set the resize in an exact proportion.
You can try the same thing (though no tested) for your <img> tag. Set a common property first, then set whatever you want.
I'm not sure about it, but it's just a thought. :)
To complete Mayeenul Islam answer I can add that it's always better to put a container inmediately after the body tag. It doesn't hurt and helps a lot. So instead of forcing the font 100% correction over every css style you could do it globally. Like this:
<style>
body { font-size:100% }
#container { font-size:1em }
</style>