Skip to content
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

Jump to bottom

CSS bug: short form of "transform: translate" is incorrectly applied #5202

Closed
sserdyuk opened this issue Dec 22, 2017 · 1 comment
Closed

CSS bug: short form of "transform: translate" is incorrectly applied #5202

sserdyuk opened this issue Dec 22, 2017 · 1 comment
Labels
backlog bug css good first issue hacktoberfest

Comments

@sserdyuk
Copy link

@sserdyuk sserdyuk commented Dec 22, 2017 •
edited by rdlauer

According mozilla, short notation translate(-50) can be used, and should applied as translate(-50, 0). NS incorrectly interprets it as translate(-50, -50).

I came across this issue due to how webpack and uglifier now rewrite CSS rules to shortest possible form, and it causes UI to break.

See related webpack ticket.

$ tns create cssTranslateTest --tsc
$ cd cssTranslateTest/
$ echo 'button.btn {transform: translate(-50);}' >> app/app.css
$ tns run android

image

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
@sserdyuk sserdyuk mentioned this issue Dec 22, 2017
Closed
@NickIliev
Copy link
Member

@NickIliev NickIliev commented Dec 26, 2017

Confirming this one as a bug - the short property for translate is not rendering the recommended result
Also related to NativeScript/nativescript-dev-webpack#377

@sis0k0 sis0k0 mentioned this issue Jan 2, 2018
Closed
@Pytal Pytal mentioned this issue Oct 27, 2019
Closed
5 tasks
SergeyMell added a commit to SergeyMell/NativeScript that referenced this issue Jul 25, 2021
@SergeyMell
fix(styling): change transform parameters parsing
7bf763f 
Fixed the incorrectly applied short form of "transform: translate" style property.

NativeScript#5202
@SergeyMell SergeyMell mentioned this issue Jul 25, 2021
Merged
5 tasks
SergeyMell added a commit to SergeyMell/NativeScript that referenced this issue Jul 26, 2021
@SergeyMell
fix(test): change transform parameters parsing
8088d4d 
Fixed test for the translate property
which had to be changed according to the
changed logic

NativeScript#5202
NathanWalker pushed a commit that referenced this issue Aug 11, 2021
@SergeyMell
fix(styling): change transform parameters parsing (#9481)
dbaab58 
Fixed the incorrectly applied short form of "transform: translate" style property.

closes #5202
@rigor789 rigor789 closed this in 2a45637 Sep 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
backlog bug css good first issue hacktoberfest
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

fix(styling): change transform parameters parsing
Fix transform: translate() when passed single value
4 participants
@sserdyuk @radeva @tsonevn @NickIliev