Comments (8)
Are you using the vh
unit? Some browsers don't honor that on resize.
from solved-by-flexbox.
Chrome latest stable release. vh
is honored like %
as long as the 100%
or 100vh
is set on the html
element. The explicit height (100% in this case) is required, at least in webkit. I haven't tested cross browser.
from solved-by-flexbox.
Can you tell me specifically what browser version you're using where 100vh
doesn't work without a height set on the <html>
element? I cannot reproduce this.
from solved-by-flexbox.
chrome version 29 for Mac. I'll try and make a video detailing what is happening
from solved-by-flexbox.
http://www.youtube.com/watch?v=thLvq7hOPRA
Here is a screen grab I did of the issue. When I resize the browser, it flickers but you get the idea.
from solved-by-flexbox.
Is it possible to upload that file to a place where I can access it?
It's a bit hard to tell from the video, but I have Chrome 29 on my mac, so I should be able to reproduce it if there's a problem.
from solved-by-flexbox.
https://github.com/Daronspence/upchurch/
here is the repo for the project.
from solved-by-flexbox.
OK, I was able to reproduce this both on your site and on mine. It's pretty clearly a Chrome bug and not a requirement of the Flexbox spec. (You can tell because anytime you force a repaint the browser automatically corrects itself.) If you wanted to report this, I'm sure they'd appreciate it.
I'm hesitant to mention this issue on my site since it's supposed to be a showcase of hack free CSS; it's supposed to demonstrate how the CSS would look if every browser were rendering it correctly. Anyway, thanks for reporting it. But I'll have to think about it a bit more before I make a change to the demo.
For your site, I'd recommend changing the <html>
rule to height:100%
and the <body>
rule to min-height:100%
since not all browsers support the vh
unit (and it's buggy as you can see). That's what I do on my site despite suggesting otherwise in the demo :)
from solved-by-flexbox.
Related Issues (20)
- Column wrap is behaving differently in safari and in chrome. HOT 1
- Aircraft-tracker: Hover and Selected
- guide ? HOT 2
- How to make contaienr responsive .container has certain width and height but not responsive
- Safari 10.1.2 don't handle responsive grate
- flexboxiisue
- Sticky footer and sidebar HOT 1
- Sticky footer corrupts printing in Firefox and probably IE HOT 1
- Anybody notice 'Promise' undefined javascript error in sticky footer demo site HOT 1
- Sticky footer example doesn't mention html height 100% HOT 6
- IE11: Image width 100% results in space below grid HOT 2
- Keypad overlaps the input box.
- Input Addon Component - Please add max-width: 0; to input css class
- dependency 'natives' is locked to a version which crashes with nodejs 10 HOT 2
- Vertical Centering doesn't work HOT 1
- Very small nitpick with Sticky Footer HOT 1
- Viewing the site locally HOT 2
- Add dark theme
- Request for French Translation
- Solve by Firefox
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from solved-by-flexbox.