• Zbx-11209 Visual Bugs In Safari And Chrome For Mac

No posts about bugs in beta software. These belong in the beta subreddits listed below. Especially visual editor editors are not optimized or tested on safari. Therefore chrome is better. But consider opera. It’s built with the chrome engine and supports chrome extensions. BugHerd is a visual bug tracker designed specifically to help web designers and developers track and resolve issues on any webpage. Just point, click and describe the issue and BugHerd will collect the necessary information including browser, OS and screenshot. This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.

With billions of mobile users nowadays, building websites that are viewable on mobile devices is indispensable. Luckily, we’ve got many tools and options for debugging websites on mobile platforms. You can, or to name a few.

If you are developing solely in an OS X and iOS environment, you may not need those third-party tools. Apple has already provided a set of tools for the job. And In this post, we’ll show you how to utilize them to access and debug static websites as well as WordPress websites in iOS for iPhone and iPad. Without further ado, let’s get started. Recommended Reading: Getting Started First, launch and enable the Developer Tools via Safari Preference. In the Advanced tab, tick the Show Develop menu in menu bar option.

A new menu called Develop will appear in the Safari menu bar. Then, in your iPad or iPhone, go to Settings Safari. Similarly, in the Advanced menu, enable the Web Inspector, like so. For WordPress-based website A relative path is required so that the CSS, Images, and JavaScript links are correctly loaded in the iPad or iPhone. If you are developing WordPress-based websites, all the asset paths are absolute. To make them a relative path, install and activate this plugin:.

Once activated, the path URLs will turn from: into something like what you see below: /wordpress/ Debugging the Website First, you need to know your network IP address number. Go to System Preference Network. There, you will find the IP address. Also, ensure that your Apple devices – Mac, iPad, iPhone – are connected in the same Network so you can access the website wirelessly on the iPad or iPhone.

In your iPad or iPhone, launch the Safari app and access followed by your web project directory – for example localhost:8888/wordpress. If you setup your local server using MAMP, should be your default local server address. As you can see below, we are viewing our website, which in this case is WordPress-based, on an iPad. Furthermore, to be able to debug the website with Developer Tools, you need to plug your iPad or iPhone to your Mac using the USB. Then, in Safari, go to the Develop menu and select your connected device.

In the following screenshot, as we select the from the Developer Tools, you can see that respective elements on the iPad or iPhone are highlighted. You can now technically debug your website in iPad or iPhone, like you do on your desktop.

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10126) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.91 Safari/537.36 Steps to reproduce the problem: 1. Go to in Chrome 61+/Android and in another non-Chrome browser of your choice. Note the window.innerWidth/Height values. Zoom in in the other browser, and press 'Refresh tests'. Window.innerWidth/Height now gives the current size of the visual viewport. Repeat the experiment in Chrome 61+/Android. Window.innerWidth/Height does not change.

What is the expected behavior? Window.innerWidth/Height should expose the dimensions of the visual viewport. What went wrong? This is a deliberate change in Chrome 61 that I strongly object to, since it breaks compatibility with ALL other mobile browsers. See for my full argument. Did this work before? Yes 60 Does this work in other browsers?

Yes Chrome version: 61.0.3163.91 Channel: stable OS Version: OS X 10.12.6 Flash Version. Processing Cc: aelias@chromium.org candr.@chromium.org msrchandra@chromium.org rbasuvula@chromium.org nyerramilli@chromium.org ligim.@chromium.org sandeepkumars@chromium.org Labels: -Needs-Bisect hasbisect-per-revision M-63 Triaged-Mobile Owner: bokan@chromium.org Able to reproduce the issue in Android. Observed the window.innerWidth/Height values are not changing on zooming in.

Steps Followed 1. Launched Browser 2. Navigated to 3. Zoomed in and refreshed the page 3. Observed the window.innerWidth/Height values are not changing on zooming in.

Chrome versions tested 61.0.3163.91 63.0.3220.0 OS Android 8.0.0, 6.0.1, Android Devices 8.0.0 Nexus 6P Build/OPR1.170623.011, 6.0.1: SM-J710F Build/MMB29K Chrome Good Build - 61.0.3160.0 Chrome Bad Build - 61.0.3162.0 Results from pre revision bisect - You are looking for a change made after 488017(GOOD), but before 488018(BAD). From the above revision range suspecting the following - @bokan - Could you please look into the issue, kindly re-assign if this is not related to your changes. Issue is seen in M63 as well. Processing Components: -BlinkLayout BlinkScroll Labels: Hotlist-Input-Dev As noted in the original message, this was an intentional change - 'inert visual viewport'. Intent to ship here: The main difference from is that the new `window.visualViewport` API replaces the lost functionality this change brings.

Motivated developers can now work around this change (and in a better way). The reason we made this change is it fixes many existing compat issues: has dozens of bugs dup'd into it. Anecdotally, it has made the browsing experience on zoomable desktop platforms (e.g. Mac) better - it fixes zoom bugs on major pages like Instagram and YouTube. Developers were struggling with the existing behavior, see comments #52/#53 in.

This change was made in consultation with other browser vendors. Safari is working on converting to this behavior as well. Edge has agreed in principle but is waiting to see what our experience with compatibility with existing pages is like. (Firefox doesn't use the two viewport model yet). So while we are moving first here, the goal is that eventually all browsers will behave this way. I do worry about compatibility impact and that could cause us to change course here. So if you have examples of sites that break please report them.

In particular, large popular sites would carry a lot of weight. However, I haven't seen any examples like that yet. Given how hard it is to build reliable pinch-zoom experiences that work across browsers I'd be surprised to see many. Another consideration is how the page's behavior changes. This change makes it so pages don't react to zoom so I expect most differences in behavior wouldn't be percieved by users as 'broken'. I'm most concerned about pages breaking in a way that impacts usability or experience. Processing Wasn't the whole point of wrapping this functionality in the new VisualViewport API to minimize the impact to existing applications?

So why weren't there, at the very least, any release notes indicating the changes that were made to the meaning of established properties (innerHeight, innerWidth, etc.)? We utilize a 3rd-party library for modal dialog windows, that has been in place for many years, in several large intranet ERP systems for our customers.

This library uses those long-established properties to determine how to center a modal dialog on the screen at the current scrolling position. As of this week, Chrome users could no longer see those modal dialogs because they were popping up outside the bounds of the screen. The idea that 'motivated developers can now work around this change' is true. But to imply that years worth of stable cross-browser development work should be broken without warning, because there is a new way of doing things that other browsers MIGHT adopt, is frustrating.

My request would be to revert the meaning of these properties and to expose the desired values through separate API features. Then educate the development community on the new recommended approach and its advantages, while existing code continues to operate smoothly. Otherwise, as I witnessed this week, the response from the end-user community becomes, 'Things don't work correctly in Chrome. Just use Firefox.'

Processing Re#9: I publicised the change in the previous which had a lot of exposure when this was shipped in M40. It was also mentioned in the article on the visualViewport.

It should have been in the release notes but taking a look now it seems it isn't, that's a mistake - sorry! Could you provide me with a demo page or a minimized repro of the broken modal dialogs - I'd like to understand this case better? (also, what's the 3rd party library you mentioned?) In general, this should still work until the user zooms in. The one way I just realized this might break is if the page is initially zoomed (e.g. Initial-scale=1 in viewport meta).if the user zooms all the way out the dialog would be in the center of the screen.

If that's the case, the easiest fix would be to set the minimum-scale to the initial-scale as well. Processing Our problem sounds like that described in Comment 9, although it was modal windows and we are using positioned 'context menus'. We used DevExpress (11.1) for menus and pulldowns in our VB.Net application.

The application was developed a few years ago and we don't have access to updates to DevExpress (without significant expense). A complete replacement is in development so we don't look to invest more cost into the existing application. The primary problem is menu box misplacement for submenus (cascading menu). The context menu might be anchored on the 'wrong end' vertically, but it's visible. The problem is with the DevExpress library placement of any submenu. These are misplaced so they are invisible, the problem is observed in normal use with an initial zoom of 100%. Customers will report they are invisible, but after much inspection, we finally realized they were misplaced, and could be 'found' by scrolling or by reducing zoom.

If the menu appears within an element such as a datagrid, the problem either doesn't occur or is contained within the visible page so the customer can find the menu. (In your words, it's not a significant effect.) But with a scrollable page there's no workaround that a typical application user would understand (nor accept).

I'll attempt to attach a picture zoomed out to show the submenu position. At normal 100% zoom where the context menu was visible, the submenu would likely be in this scrolled past portion of the page, thus invisible. Processing Thanks for the explanation.

Zbx-11209 Visual Bugs In Safari And Chrome For Mac

I'm suspecting your issue is unrelated to the change pointed out by this bug. To clarify, when you talk about zoom, do you mean 'browser zoom' (i.e. Ctrl +/-) or 'pinch-zoom' (using a touchscreen)? This bug is specifically about a change to pinch-zoom only (and it was made to fix these kinds of bugs), if it's browser zoom then it's unrelated (but we may still want to take a look). You mentioned IE, does the issue reproduce in any other browsers? Do you have a test page I could have a look at to determine what the differences might be between browsers?