So I noticed something peculiar while working on a personal project just now.
The following code will cause an issue with the position of the div element in portrait mode if the phone is switched back and forth between orientations.
Instead of the div sitting fixed or flush to the bottom of the screen, the div will float above and not touch the bottom of the screen at all.
html {
width: 100%;
height: 100%;
border-bottom: solid blue 3px; box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
box-sizing: border-box;
border: solid black 3px;
background: white;
}
<div></div>
While troubleshooting this issue, I discovered the following things:
If you change the height of html from 100% to 110%, the issue resolves itself.
110% is very likely not the exact "break" point, but I do know that the div will not touch the bottom of the screen even if the height of html is set to as much as 105%.
The dimensions of the square do not matter too much. I've tested at 10px, 50px, 100px, and 200px, and it disappears completely if set to 10px, but behaves the way I've described above for all the other values.
Notably, I am testing this on, not an iPhone 6s, but a plain iPhone 6.
I encourage other users to test this for yourselves and share your experience!
Does this bug exist on other devices? In other iOS versions?
Is there any way to fix this other than increasing the height of html to 110%?
Related
Consider we have a 72x100px PNG image which is called pic.png. Its left half is yellow and the right half is black.
Then we have a web page with an element <i class="picture"></i> with the following CSS:
.picture {
background-image: url('pic.png');
background-position: 0 36px;
display: inline-block;
height: 36px;
width: 36px;
}
If I open this page in Chrome 50 or Opera 37 and set the scaling to 33%, 67% or 90%, I will see a 1px black stripe at the right part of the element. The screen resolution is 1920x1080.
How can we fix this issue so that the element is always yellow in any scale in any browser?
By now I know that if I set width to 35.5px, the black stripe will be seen only when the scale is 67%.
Try adding this and see if it solves the problem...
display: inline-table;
I am trying to add a fixed element to the bottom right corner of my webpage, which I have done with success.
I have also limited it's width with max-width: 30%; so in mobile devices it does not show the image too big. What I want to do now is to adjust the image by screen height as well. Is there anything else to figure this out except for Media Queries?
HTML:
<div id="cornerImg">
<a href="my-site-link-here">
<img src="image/source.jpg" />
</a>
</div>
CSS:
#cornerImg {
position: fixed;
bottom: 0;
right: 0;
max-width: 30%; /* Already working as expected */
max-height: 30%; /* Adjusts the visible part of the image, but overflowing */
}
So I get the image resized on the screen, but it does not actually change the size of the image when it goes under the max-height condition. It just shows the top of the image and leaves the rest of the image invisible.
I know how to make this as Media Query, but I am seeking for a non-MQ solution here, if it is possible in any form. Thank you in advance!
EDIT: If any Media Query solutions come up, please provide some advice on that as well. It seems that even though I can adjust the height of the image in there by max-height, it still overflows the image out from the screen, so no luck on that side either.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
You can try this
This question has been asked before here and here but I was unable to find a suitable answer
I don't want to change the default view-port because everything else other than my footer scale beautifully. Strangely, I have a fixed position menu <div> that has always accepted the width: 100% value.
I have tried width: 100%, width: 100vw, and width: inherit. For some reason, a couple full-width images on my site wouldn't work with width: 100%, but took on the correct width when I used width: inherit.
Is there a solution in which I don't have to change the view-port size that I haven't thought of?
My menu <div> which works correctly:
#navbar {
z-index: 5;
width: 100%;
padding: 10px 0px 10px 25px;
background-color: #1391cb;
position: fixed;
top: 0;
left: 0;
border-bottom: 4px solid #3a3a3a;
}
My images which I got to correctly scale:
#media only screen and (max-device-width: 480px) {
#main-content, #main-content-overlay {
width: inherit;
}
}
In addition, certain pages of my site work perfectly on mobile. There is no discernible pattern to which do, and which don't. Some of the pages that work have more content than the height of the device, and others don't. None of my pages exceed the width of the view-port in any way, shape, or form.
The only case I've seen width:100% being ignored, is if the parent container(s) do not have a width set.
I'm building a fairly simple static frontend-only webpage. I have the following css rules for my wrapper div (everything else in the page is in it) and the body:
body {
background-image: url(../img/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#content_wrapper {
margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
min-width: 900px;
padding: 0;
border-radius: 10px;
}
Which works fine:
However, as you can read by my comment the client prefers a 20% margin, as to make the whole page more narrow. However this happens:
The page shifts right. This is pretty much the same visual issue I have opening this page with my tablet even using 10% margin (although I would appreciate an explanation to why that happens in tablets, it's not the focus of this question here).
How can I fix this? For all I know this shouldn't happen
When you state that
margin: 15px 20%;
you are effectively telling that you have 20% for both of left and right margin. This means that #content_wrapper has 60% of the container as a maximum. The problem is that 60% might be bigger than the available space. I believe you should add the width to the rule:
width: 60%;
well try changing it to width: 15px 20% 15px 10%; you wish to change only left side margin to 10%.
Or put 2 blank div on each side of .content-wrap with 10% width and phantom data to give width to it
I am trying to apply a full screen background image on one of my projects. It works fairly well in IE9 and Firefox but I´ve been struggling with an issue on Chrome because it adds some 1px border to the top and left.
Screenshot: here
I tried to apply border:0; but still nothing.
<img src="./images/highway.jpg" class="background-image" alt="background-image" />
img.background-image {
/* Set rules to fill background */
min-height: 100%;
min-width: 960px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.background-image {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Anyone has an idea of what might be causing this? Would appreciate :)
I have the same problem, it is a bug of Chrome, they know that bug, but I think Google won't repair this bug, more than 10 versions since the bug appeared and they still didn't repaired...
If you change the size of the window magically the 1px dissapear (and reapear, depending of somethig inside Chrome)...
Try to put background-attachment: fixed, sometimes it resolves this bug (but your background loses the scroll movement).