There is a background image on our Magento web site that expands as needed due to the amount of content. It works fine on PCs and (hopefully Macs). But on any iOS device, the white background is not shown.
I have included two screenshots - one of how it looks in a regular PC browser and one showing how it looks on an iPhone. (see next post for the screenshots)
Here is our site: http://tinyurl.com/arfpf7g
Here is a link directly to the image that is not showing up on iOS devices: http://tinyurl.com/bcovmvg
Thanks!!
The problem is that iOS has a limit on the maximum dimensions of images it can load. From memory, it's 3 to 5 megapixels, depending on the device. For reference, Your image is 9.78mp (978 x 10000).
Your background image has absolutely no reason to be that big. It's 171kb and it's repeatable after about 10px. Cut out the top and it could be 10px high and you could achieve the same affect using background-repeat: repeat-y instead. Then simply apply the top of the background to another element.
Alternatively, that background image could be replicated in css using a box-shadow and a dashed border.
CSS:
.outer {
margin: 20px;
width: 200px;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.inner {
height: 200px;
border: 1px dashed #bde432;
}
HTML:
<div class="outer">
<div class="inner"></div>
</div>
Demo: http://jsfiddle.net/WUpEF/
Related
I have a specific problem. A website has an image with 5px solid border and when I change Windows scale settings to 125% I see an empty line between image and border.
img {
border: 5px solid red;
}
<img src="https://via.placeholder.com/290x140/000000/FFFFFF/?text=IPaddress.net">
I'm testing it on Google Chrome v91. It looks like Chrome has a problem with subpixels when zooming/scaling.
I have also noticed that this white line is actually a background color of an image where white is probably default.
I have tried many settings but nothing works. Need help.
You can try putting the image in a div, and setting it to 100% like this:
img {
border: 5px solid red;
}
#image {
width: 100%;
height: 100%;
}
<div id=”image”>
<img src="https://via.placeholder.com/290x140/000000/FFFFFF/?text=IPaddress.net">
</div>
Let me know if it works or not. If you want to set the size of the image, change the size of the div.
(for anyone running in to this in the future)
A workaround for this specific problem is to style the background of the parent container the same color as the border.
#image {
background-color: red;
}
If the border color changes on, say, on hover, then change the background color with it.
need some help with a website I'm working on.
Portrait mode on Android looks like this:
Now, landscape, no css change:
No problem whatsoever. Follow me to the next screenshot illustrating what happens on iOs Safari/Chrome in portrait mode. Everything fine:
Landscape mode goes to "fullscreen" since it's an SE so I figured the screen, being quite small, goes full screen and that still looks fine.
I can scroll through the content no problem. However, when I click a link to go to another page this happens:
The behavior of the page is quite simple: the scrollable content is inside a div which is the rounded one which mustn't move during scrolling. What happens is that the rounded div is set to be 100% height of the screen and when top and bottom navbars appear on iOs, the rounded div won't change its height to adapt to the usable screen part.
body css is as following:
body {
margin: 0;
height: 100%;
overflow: hidden;
-webkit-text-size-adjust: 100%; }
while rounded corners div is managed like this:
.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }
Any ideas on how to make the height right everytime the usable screen size changes?
Thank you
So sadly iOS has been notorious for this type of stuff for what seems years. First it was the top address bar, and now it is the browser menu. So you have a couple options. YOu can set a media query for landscape and shorten the height of that container and just have it scroll if you need. Could probably drop font-size too. Or there are a couple options in this article that might help.
You could also try 100vh instead as well. As that will make it the full height of the available viewport which I have seen at times act the way I needed it to vs 100% height.
https://www.eventbrite.com/engineering/mobile-safari-why/
When adding a border-radius on an iFrame's parent div, the border doesn't perfectly fit the iFrame, even when they are assigned the same width and height values.
I've added arrows pointing to the visual gaps in the resulting image below. Screenshot is from the latest version of Chrome (March, 2016).
HTML Code:
<div class="mapFrame">
<iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&output=embed" width="500" height="400"></iFrame>
</div>
CSS Code:
.mapFrame
{
border-style: solid;
border-width: 6px;
border-color: #ffffff;
box-shadow: 0px 0px 20px #000000;
margin: auto;
border-radius: 80px;
overflow: hidden;
width: 500px;
height; 400px;
position: relative;
}
Result:
Have you tried .mapFrame iframe {border: none}? From my computer (also latest chrome), it appears to be the default iframe border. You might also consider making the iframe display:block as inline elements tend to have line height and letter spacing that throws off pixel exact rendering.
Border radius isn't well supported or consistent yet. If you want the desired effect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors technique if you're iframe varies in height.
http://www.alistapart.com/articles/slidingdoors/
Hope this helps.
Good luck!
I have text and want to give the text a left and right border which vertically extends over the entire webpage. This is my html
<div id="vLine">
<h1>text</h1>
</div>
and this is my css
#vLine {
height: 100%;
width: 50px;
border-left: 3px solid black;
border-right: 3px solid black;
Now, even though I set my height to 100%, it still like a tiny 2px gap between the top of the line and the top of the webpage, it stretch over the entire page and connect till the top of the page. Why is this gap there? I am using the chromium browser, and i'm guessing this gap will vary depending on browsers but how do I get rid of this gap completely regardless of the browser?
Hm okay so what I tried way,
#vLine {
margin: -10px;
}
and it worked, turns out that gap which looked like just 2px was 10px but yea, it fixed it.
I have an odd scenario with my CSS, happening in all browsers:
Sometimes, when a new image appears, it displays using the min-width/min-height size specified in my CSS. If I merely resize the browser (drag a corner) the problem goes away and the image properly shows up at the full, correct resolution. In fact, this does not even happen every time. It only happens about 5-10% of the time, when an image is first seen. Eg, if I clear the cache on my browser and then reload, the problem becomes more prevalent.
Here's a picture of the Chrome elements panel, which shows that the min width/height (10px) is being applied instead of the "natural" resolution:
And here's what it actually looks like on the screen:
The border of the image is being applied via my CSS...
.streamifiedPostImageContainer {
margin-top: 5px;
overflow: hidden;
width: 100%;
}
.streamifiedPostImage {
float: left;
margin-right: 8px;
max-width: 100%;
}
.streamifiedPostImage img {
border: 3px solid #FFF;
max-width: 100%;
max-height: 100%;
min-width: 10px;
min-height: 10px;
box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, .3);
}
I've used the elements panel to inspect all the styles. The elements panel shows the "computed" size at 10x10px, yet all of the "Styles" properly match my CSS (above), with no indication why it would be using the min width/height instead of the (proper) image width/height.
Again, the strangest thing is that this fixes itself by merely dragging a corner on the browser or reloading the page. It seems that there is some sort of race condition between the image being cached and the CSS being applied, because it only happens about 5-10% of the time, but it DOES happen on all browsers.