Three.js: Worth setting `display: block` for canvas?
Description of the problem
I've just added <!DOCTYPE html> to my project and noticed that my page now has scroll bars, both vertical and horizontal. My understanding is that specifying this doctype changes the box model, so I was wondering if it's worth changing the display style for the generated canvas explicitly to block in the renderer.
I've copied https://threejs.org/docs/#manual/introduction/Creating-a-scene over to here to illustrate. While doing so, I noticed that the base fiddle sets overflow: hidden so I can do something similar if adding it into the renderer is not something that you want to pursue.
Three.js version
- [ ] Dev
- [x] r95
- [ ] ...
Browser
- [ ] All of them
- [x] Chrome
- [x] Firefox
- [x] Safari
- [ ] Internet Explorer
OS
- [ ] All of them
- [ ] Windows
- [x] macOS
- [ ] Linux
- [ ] Android
- [ ] iOS
Hardware Requirements (graphics card, VR Device, ...)
Nada.
msbit
All 2 comments
As you are aware, the bottom space is generated by inline-level-block which is the initial display of canvas for text-runs. then, it causes scrollbars.
If you set block, then the descendants will be ignored. However, the CSS Specificity in style attributes is very high. I think it should be done in userland rather than done in the renderer.
But worth changing the styles in examples.
yomotsu
on 21 Aug 2018
Yep fair enough, I can understand the high likelihood of unintended consequences. I'll just sort it out in my code.
msbit
on 21 Aug 2018
Related issues
konijn
路
3Comments
seep
路
3Comments
danieljack
路
3Comments
Bandit
路
3Comments
clawconduce
路
3Comments
Most helpful comment
As you are aware, the bottom space is generated by inline-level-block which is the initial
displayof canvas for text-runs. then, it causes scrollbars.If you set
block, then the descendants will be ignored. However, the CSS Specificity in style attributes is very high. I think it should be done in userland rather than done in the renderer.But worth changing the styles in examples.