w3c/csswg-drafts

[cssom-view] Layout dimension that divides+rounds+sums to value different to original dividend

Open

#1,211 创建于 2017年4月13日

在 GitHub 查看
 (4 评论) (0 反应) (0 负责人)HTML (3,546 star) (545 fork)batch import
Help Wantedcssom-view-1

描述

Is there any specification for HTML layout dimensions that divide, round and sum to a value greater than the original dividend?

For example

  • A container has two columns.
  • Both columns are 50% the width of the parent.
  • The width of the container is 9 pixels.
  • How wide should each column be?

Major web browsers handle this differently;

Browser First Second element.offsetWidth Aliases †
Chrome 5 4 5 and 4 respectively No
Safari 5 4 5, even for the 4px column No
Firefox 4.5 4.5 rounded to 5 Yes
Edge 4.5 4.5 rounded to 5 Yes

† Allows element boundaries to be mid-pixel, causing that pixel to be aliased based on the two elements that it straddles.

row height screenshots column width screenshtos

Test cases

The specification for offsetWidth only says that offsetWidth must be an integer. Is this specified elsewhere? Should it be?

Is this the correct place to discuss?

贡献者指南

技术栈
无
领域
frontend
议题类型
research
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
4
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
CSS layout basicsCSSOM specificationUnderstanding of offsetWidth
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
20
研究方向
This issue seeks clarification on how CSSOM layout dimensions should handle rounding and summing when percentages yield fractional values. A contributor could analyze the current CSSOM spec for offsetWidth (https://drafts.csswg.org/cssom view/#dom htmlelement offsetwidth) and compare browser behaviors documented in the issue. Then propose a spec amendment to define a consistent algorithm. The test cases at https://github.com/BevanR/5 and 5 is 9/ provide practical examples to validate any proposal.