如何克服 Webkit 缩放相关问题的考验和磨难?
在我看来,Webkit 是一个糟糕的渲染器。作为一名网页设计师/开发人员,我会考虑我的设计在每个放大倍率下的外观。 Webkit 对此处理得非常糟糕。边距、内边距和边框在各种放大倍率下的渲染效果都非常差,而且在 WebKit 中没有可以使用的“交叉缩放”兼容的 CSS。在 IE、Firefox、Opera 中放大和缩小任何网页都是一致的。例如,看看这个网站:
http://development.mminc.co/davidphotos/
尝试在 IE 或 Firefox 中以不同的放大倍数使用底部的轮播。效果很好,对吧?现在在 Chrome 或 Safari 中尝试同样的操作。繁荣!开发者的噩梦!拜托,如果有人知道让 Webkit 与 Trident 能够成功做到的事情相关的任何技巧,我很想听听。我听说过 jQuery 缩放插件,但这是最后的手段。我到处寻找这个问题,但没有人提到 Webkit 缩放问题。好像这是禁忌什么的。就我个人而言,我认为这是现代浏览器时代最大的错误之一,特别是当像 Chrome 这样一个(本来)很棒的浏览器在呈现问题上给我带来比 IE7 更多的麻烦。
编辑:我觉得我应该更笼统,并使用一个示例,显然只实现了 HTML 和 CSS。
Webkit 通过缩放测试强制顶部菜单换行,但其他浏览器没有。这是引擎的一个主要问题,如果有任何具体的解决方案,我想听听。如果没有,那么我认为这个问题应该立即得到解决;它对用户来说是碍眼的,对开发人员来说则是噩梦。事实上,这个问题在网络上没有任何地方得到解决,这很麻烦。
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这并没有回答如何解决一般的 WebKit 缩放问题,但它应该有助于解决您的特定问题。
您正在使用 jCarousel。
即使简单演示也显示了您所描述的相同问题。
因此,当涉及到使用 WebKit 浏览器进行缩放时,该插件就被破坏了。
您可以向插件的作者寻求建议,或者找到不同的轮播插件。
例如,当您使用 WebKit 浏览器放大时,这个似乎没有任何问题:
http ://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (查看“dispItems”演示)
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)