Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ahmed Abdellatef
11,095 PointsFour in a row game: lack of browser compatibility !
I want to reference this project on my portfolio but I couldn't do that because it doesn't look the same on the Firefox browser. The visual representation and functionality are mess. I tried to figure out what the problem but I failed. Can somebody point out where is the problem with the Firefox browser so I can fix it ?
4 Answers
Ahmed Abdellatef
11,095 PointsThank you guys. But I finally figured out the problem. We used in the project the offsetLeft property to detect how far is the token from its container on the x-axis, the problem is how each browser calculate this property. The container has a border of 16px, in Chrome when the token is in the first column it neglects the border thickness and calculate the offsetLeft of the token to be 0 while in the Firefox it takes this 16px into account and the starting offset is set to 16px. This explains all this unexpected behavior. My solution to that is figuring out the browser and behave accordingly. In Token.js file edit the get offsetLeft() to be as follows :
get offsetLeft() {
if (navigator.userAgent.search("Firefox") >= 0) {
return this.htmlToken.offsetLeft - 16;
} else {
return this.htmlToken.offsetLeft;
}
}
Steven Parker
231,084 PointsCongratulations on resolving your issue!
Ahmed Abdellatef
11,095 PointsThanks :) And thank you too for your time and concern.
Ahmed Abdellatef
11,095 PointsThanks for replying. Here is the course link : https://teamtreehouse.com/library/objectoriented-javascript-by-example
We didn't use the workspace during this course, so here is a link to the final project files on my google drive : https://drive.google.com/open?id=1V1mlB3ODVOMJl8k-tMSo8XDbhEGRbLD_
Ahmed Abdellatef
11,095 PointsJust open the index.html file on chrome and test it you will find everything works well and then open it on Firefox you will see the mess!
Ahmed Abdellatef
11,095 PointsSorry I forgot to say download the files on your machine and then just open the index.html in the two browsers and see the difference. Thanks in advance.
Zack Jackson
30,220 PointsHave you tried applying webkit prefixes for your code?
Depending on which editor you use, there should be a webkit prefixer that could help with this. I use atom and VScode and both have the webkit prefixer capability.
Steven Parker
231,084 PointsSteven Parker
231,084 PointsPlease provide a link to the project so we can take a look.