-
-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vertical alignment issues #21
Comments
Addressed in v2 branch, not sure about the final approach yet. But this is a high priority. |
Thanks for looking into it! v2 looks better, I might even use that one for production. 😉 Note that rendering is still a bit inconsistent across platforms, e.g. Chrome on Windows and OSX render differently, though it's not too significant. Updated the example to include v2 and a separate page with some Bootstrap-styled buttons. |
One last adjustment before final 2.0.0 release: @vv-monsalve please can you check and confirm for the very last time? 🙏 |
I just run QA on the latest files at commit 743ffa3, and everything is reported ok, with 0FB fails. |
The font's vertical alignment is too far up. This started with version 1.1.4, version 1.1.3 was still fine.
Here is a minimal example for versions 1.1.3, 1.1.4 and 1.1.6 (latest):
https://glitch.com/~space-grotesk-alignment-test
This is how it looks on my Chrome on Linux:
![image](https://user-images.githubusercontent.com/213784/80640955-6ee3b180-8a64-11ea-9f3d-2a98f6e2f5e0.png)
When checking other browsers, I also encountered inconsistent rendering across different platforms and browsers that varies much more than it should. Note how 1.1.6 sometimes has no vertical spacing and how 1.1.4's vertical alignment is correct on some platforms while it forces its lines to be too tall.
Since version 1.1.3 rendered consistently and was aligned properly, I'm hoping this to be a change in your toolkit that can easily be fixed. Fingers crossed. :)
Attached are some screenshots I took using Browserstack. Please ignore the borders and bad sizing.
Windows Chrome:
![bs_win10_Chrome_81 0](https://user-images.githubusercontent.com/213784/80640665-05fc3980-8a64-11ea-9766-e6a61a7bba64.jpg)
Windows Firefox:
![bs_win10_Firefox_75 0](https://user-images.githubusercontent.com/213784/80640672-07c5fd00-8a64-11ea-9158-27a84798a70d.jpg)
OSX Chrome:
![bs_maccat_Chrome_81 0](https://user-images.githubusercontent.com/213784/80640678-08f72a00-8a64-11ea-84ac-21315f541257.jpg)
OSX Firefox:
![bs_maccat_Firefox_75 0](https://user-images.githubusercontent.com/213784/80640679-0a285700-8a64-11ea-81f2-496935ef6a46.jpg)
OSX Safari:
![bs_maccat_Safari_13 0](https://user-images.githubusercontent.com/213784/80640685-0b598400-8a64-11ea-84fb-fecda1d0cfca.jpg)
The text was updated successfully, but these errors were encountered: