1240519 - Example from translateX page does not work on codepen and JSFiddle

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: CSS, defect, P5)

Description

[David Bruant]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: 45 Branch
 Technical Contact: 

:: Details

The live example on MDN does work as expected (10px shift), however, it does not work on codepen.io and jsfiddle (the 3 boxes are aligned).
Not sure why there is a difference at all.
Noticed on Firefox 45.0a2 (2016-01-17) on Linux (Ubuntu)

Sorry I don't have the time to investigate right now on where this difference comes from.

Comment 1

[Jean-Yves Perrier [:teoli]]

This is weird. I see the same with Firefox, Chrome and Safari (OS X): correct in the live sample of MDN, wrong in jsfiddle or codepen.

Comment 2

[Jean-Yves Perrier [:teoli]]

Fixed: there was a strange carriage return at the beginning of the transform line.

It was stripped for use on MDN, but made the entry invalid in codepen/jsfiddle

I cleaned the spaces (visually identical) and now it works.

I still find this a bit weird as there was no error in the console and I wasn't able to discover what character it was (don't have an hex editor handy), but it is gone now.

Comment 3

[Julien G]

It is likely to be due to " " that were present in source mode. Not sure how I put them here but removing them (only) fixes the issue. I'll fix the different examples.